<template>
  <div>
      <div class="home maxinBox" v-if="user.userType === '04'">
        <div class="backgroundfff" style="margin: 0 auto;height: 47vh;padding: 6.25rem 0;">
          <div class="center">
            <img src="../../assets/images/null.png" alt="">
          </div>
          <div style="width: 80%;margin: 0 auto;">
            <van-button round block plain type="info" @click="loginOut">
              <span>退出当前账号</span>
            </van-button>
          </div>
        </div>
      </div>
      <div class="home maxinBox" v-else-if="user.userType === '02' && user.userStatus === '1'">
        <div class="backgroundfff" style="margin: 0 auto;height: 47vh;padding: 6.25rem 0;">
          <div class="center">
            <img src="../../assets/images/null.png" alt="">
            <p>您的入场申请已提交，请耐心等待审核通过...</p>
          </div>
          <div style="width: 80%;margin: 0 auto;">
            <van-button round block plain type="info" @click="loginOut">
              <span>退出当前账号</span>
            </van-button>
          </div>
        </div>
      </div>
      <div class="home maxinBox" v-else-if="user.userType === '02' && user.userStatus === '3'">
        <div class="backgroundfff" style="margin: 0 auto;height: 47vh;padding: 6.25rem 0;">
          <div class="center">
            <img src="../../assets/images/null.png" alt="">
            <p>{{localStorage.getItem('exitReason')}}</p>
          </div>
          <div style="width: 80%;margin: 0 auto;">
            <van-button round block plain type="info" @click="loginOut">
              <span>退出当前账号</span>
            </van-button>
          </div>
        </div>
      </div>
      <div v-else>
        <div style="position: relative">
          <van-row class="personal plr10" v-if="userInfo" style="background-color: #2F7DF4;padding-top: 2.875rem;height: 11.875rem;">
            <van-col :span="5">
              <img :src="userInfo.headUrl" @click="bigAvatar(userInfo.headUrl)" alt="" class="avatar">
            </van-col>
            <van-col :span="14" class="nickname">
              <span>{{$t('myModel.hello')}}，{{userInfo.name}}</span>
            </van-col>
            <van-col :span="5" v-show="user && user.userType !== '01'">
              <img :src="userCodeUrl" alt="" class="qrCode" @click="onMyCode">
            </van-col>
          </van-row>
          <div style="position: absolute;bottom: -3rem;left: 5%;width: 90%" v-show="user && user.userType !== '01'">
            <van-row class="todayShow center" v-if="messageById">
              <van-col :span="8">
                <div @click="$router.push({name: 'Attendance'})">
                  <label>
                    <span v-if="messageById.signIn === 0">{{$t('myModel.unSign')}}</span>
                    <span v-else>{{$t('myModel.sign')}}</span>
                  </label>
                  <p class="color999 fontSize12">{{$t('myModel.signIn')}}</p>
                </div>
              </van-col>
              <van-col :span="8">
               <div @click="$router.push({name: 'Attendance'})">
                 <label><span style="color: #F00">{{messageById.workHours || 0}}</span>小时</label>
                 <p class="color999 fontSize12">{{$t('myModel.workHours')}}</p>
               </div>
              </van-col>
              <van-col :span="8">
                <div @click="$router.push({name: 'IllegalQuery'})">
                  <label><span style="color: #F00">{{messageById.illegalCount || 0}}</span>次</label>
                  <p class="color999 fontSize12">{{$t('myModel.violations')}}</p>
                </div>
              </van-col>
            </van-row>
          </div>
        </div>
        <div style="margin-top: 3.3125rem">
          <van-cell title="宿舍信息:" class="dromMessage" v-show="user && user.userType !== '01'" :value="userInfo.dormInfo ? userInfo.dormInfo : '暂无宿舍信息'" />
          <van-cell :title="$t('myModel.personal')" icon="description" is-link to="Personal" v-show="user && user.userType !== '01'" />
          <van-cell :title="$t('myModel.myProject')" icon="comment-circle-o" is-link to="MyProject" style="margin-bottom: 0.3125rem" />
          <!-- <van-cell :title="$t('myModel.invitation')" icon="clock-o" @click="showShare = true" v-show="user && user.userType === '01'" /> -->
          <van-share-sheet
            v-model="showShare"
            :title="$t('myModel.invitationType')"
            :options="options"
            @select="onSelect"
          />
          <van-cell :title="$t('myModel.about')" icon="info-o" is-link to="About" />
          <van-cell :title="$t('myModel.setting')" icon="setting-o" is-link to="Setting" />
        </div>
      </div>
  </div>
</template>

<script>
  import dashbordAPI from '../../api/dashbordAPI.js'
  import myAPI from '../../api/myAPI.js'
  import userApi from '../../api/userAPI.js'
  import src from '@/assets/images/logo.png'
  import code from '@/assets/images/showCode.jpg'
  import note from '@/assets/images/note.png'
  import shareImg from '@/assets/images/shareImg.png'
  import shareLink from '@/assets/images/shareLink.png'
  import {ImagePreview} from 'vant'
  export default {
    data() {
      return {
        messageById: null,
        userCodeUrl: '',
        user: {
          userStatus: '',
          userType: '',
        },
        linkUrl: '',
        qrCodeUrl: '',
        src: src,
        showCode: code,
        showShare: false,
        options: [],
        userInfo: null
      }
    },
    methods:{
      // 获取用户二维码
      getProjectByid() {
        dashbordAPI.getWorkTest(localStorage.getItem('projectId')).then(res => {
          this.messageById = res
          this.userCodeUrl = res.qrCodeUrl
          localStorage.setItem('userCode', res.qrCodeUrl)
        })
      },
      // 退出登录
      loginOut() {
        this.$dialog.confirm({
          title: '退出登录',
          message: '确认退出登录吗？',
        }).then(() => {
          userApi.loginOut().then(res => {
            localStorage.removeItem('token');
            localStorage.removeItem('userName');
            localStorage.removeItem('userType');
            localStorage.removeItem('userStatus');
            this.$router.push({
              path: '/'
            })
          })
        });
      },
      // 放大图片
      bigAvatar(img) {
        ImagePreview({
           images: [img],
        })
      },
      // 查询用户信息
      getUserInfo() {
        myAPI.getUserInfo().then(res => {
          this.userInfo = res
        })
      },
      // 查询管理员用户信息
      getAdminUserInfo() {
        myAPI.getAdminUserInfo().then(res => {
          this.userInfo = res
        })
      },
      // 企业员工邀请访客
      invitationVisitor() {
        let projectId = localStorage.getItem('projectId')
        myAPI.visotorInvite(projectId).then(res => {
          this.linkUrl =  res.linkUrl
          this.qrCodeUrl = res.qrCodeUrl
          this.options = [
            { name: '复制链接', icon: shareLink, url: this.linkUrl },
            { name: '二维码', icon: shareImg, shareImg: this.qrCodeUrl },
          ]
        })
      },
      // 查看我的二维码
      onMyCode () {
        this.$router.push({
          name: 'MyCode'
        })
      },
      onSelect(option) {
        if (option.name === '复制链接') {
          this.$copyText(option.url).then(e=>{
            this.$toast('复制成功')
          }, e=> {
            this.$toast('复制失败')
          })
        } else {
          this.$dialog.confirm({
            title: '图片',
            message: '是否保存二维码到本地',
          })
            .then(() => {
              if(!window. plus) return;
                plus.gallery.save(this.qrCodeUrl, function () {
                plus.nativeUI.alert("保存图片到相册成功");
              },function(){
                plus.nativeUI.alert("保存失败");
              });
            })
            .catch(() => {
              // on cancel
            });
        }
        this.showShare = false;
      },
    },
    mounted() {
      this.user.userStatus = localStorage.getItem('userStatus')
      this.user.userType = localStorage.getItem('userType')
      if (this.user.userType === '01') {
        this.invitationVisitor()
        this.getAdminUserInfo()
      } else {
        this.getProjectByid()
        this.getUserInfo()
      }
    }
  }
</script>

<style scoped lang="scss">
  /deep/ .dromMessage .van-cell__value{
    flex: 2;
  }
  .personal{
    height: 3.625rem;
    position: relative;
    .qrCode{
      width: 1.875rem;
      height: 1.875rem;
      // position: absolute;
      // top: 50%;
      // margin-top: -0.9375rem
    }
  }
  /deep/ .van-cell{
    font-size: 1rem;
    span{
      font-weight:500;
    }
    .van-icon{
      font-size: 1.375rem;
      margin-right: 0.625rem;
    }
  }
  .todayShow{
    border-radius: 0.9375rem;
    padding: 1.875rem 0.3125rem;
    background-color: #fff;
    margin-top: -4rem;
    .van-col{
      padding: 0 0.3125rem;
    }
  }
  .nickname{
    color: #fff;
  }
</style>
